<template>
  <div class="page">
    <van-nav-bar title="订单支付" left-text="返回" 
    left-arrow  
    @click-left="onClickLeft"
    @click-right="onClickRight"
    >
        <template #right>
<span>取消</span>
        </template>
      </van-nav-bar>

      <div class="main">
        <div class="locations-wrapper">
            <div class="chose_location">
                <div class="location-text">
                    <span>江西财经大学现代经济管理学院尚信Bwadadaddadwwwwwwwwwwadaddwadaddadad</span>
                </div>
                <div class="location-icon">
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="user-info">
                <div class="user-name">
                    <span>张三</span>
                </div>
                <div class="user-phone">
                    <span>13800000000</span>
                </div>
            </div>
            <div class="delivery-time">
              <span>预计需要{{deliveryTime}}送达</span>
            </div>
        </div>
      </div>

      <div class="payment-list-section">
<van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            class="payment-list"
          >
            <div>
              <PaymentListItem 
                v-for="item in paymentListData" 
                :key="item.id" 
                :data="item"
                class="payment-item"
              />
            </div>
          </van-list>
      </div>
<div>

  <!-- TODO: 优惠劵领取 -->
</div>

<van-submit-bar :price="orderStore.totalPrice" button-text="支付" @submit="onSubmit" />
</div>


</template>

<script setup>
import { showFailToast, showSuccessToast } from 'vant';
import PaymentListItem from '../../components/PaymentListItem.vue';
import { useOrderStore } from '../../store/order';
import router from '../../router';
import { reactive, ref, onMounted } from 'vue';
const orderStore = useOrderStore();
const loading = ref(false);
const finished = ref(false);
const paymentListData=reactive([]);
const deliveryTime = orderStore.transformDeliveryTime(Math.floor(Math.random() * 181)); // 生成0-180的随机整数
// 页面加载时立即加载数据
onMounted(() => {
  onLoad();
});

// 点击返回 将tempPaymentList的数组转移到pendingPaymentList
const onClickLeft = () => {
  router.back();
  // 点击返回 将tempPaymentList的数组转移到pendingPaymentList
  orderStore.pendingPaymentList.push(...orderStore.tempPaymentList);
  // 清空tempPaymentList
  orderStore.tempPaymentList.splice(0, orderStore.tempPaymentList.length);
};
const onClickRight = () => {
  showFailToast('取消支付');
  router.back();
  // 点击返回 将tempPaymentList的数组转移到pendingPaymentList
  orderStore.pendingPaymentList.push(...orderStore.tempPaymentList);
  // 清空tempPaymentList
  orderStore.tempPaymentList.splice(0, orderStore.tempPaymentList.length);
  
};
const onLoad=()=>{
  loading.value=true;
  setTimeout(()=>{
    // 清空现有数据
    paymentListData.splice(0, paymentListData.length);
    // 使用push添加数据，确保响应式
    orderStore.tempPaymentList.forEach(item => {
      paymentListData.push(item);
    });
    loading.value=false;
    finished.value=true;
  })
}
const onSubmit=()=>{
  // 完成支付，将订单转移到已完成列表
  orderStore.completePayment();
  showSuccessToast('支付成功');
  router.push({ name: 'Order' });
}
</script>
<style scoped lang="scss">
.page{ 
  .main{
.locations-wrapper{
    min-height: 80px;
    border-radius: 16px;  // 更大的圆角，更像卡片
    background: #ffffff;
    padding: 16px;
    border: 1px solid #f0f0f0;
    
    .chose_location {
      display: flex;
      align-items: center;
      .location-text {
        flex: 1;
        margin-right: 12px;
        
        span {
          display: block;
          word-break: break-all;
          line-height: 1.5;
          color: #333;
          font-size: 14px;
        }
      }
      .location-icon {
        flex-shrink: 0;
        color: #969799;
        font-size: 16px;
      }
    }
    .user-info {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      color: #969799;
      font-size: 14px;
      .user-name {
        margin-right: 8px;
      }
    }
    .delivery-time{
      margin-top: 8px;
      font-size: 18px;
    }  
  }
}
// TODO: 订单支付卡片页面样式
.payment-list-section{
  margin-top: 16px;
}
}
</style>